<template>
  <div id="statementAnalysis">
    <div class="pageHead">
      <div class="pageLf">
        <div class="block">
          <el-select
            v-model="params.subId"
            placeholder="选择公司"
            @change="selectChange"
          >
            <el-option
              v-for="item in setCompanyList"
              :key="item.subid"
              :label="item.abbreviationName"
              :value="item.subid"
            >
            </el-option>
          </el-select>
        </div>
        <div class="block">
          <el-date-picker
            v-model="params.createtime"
            type="month"
            placeholder="选择日期"
            @change="timeChange"
            format="yyyy-MM"
            value-format="yyyy-MM"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="pageRg">
        <div class="block">
          <el-button type="primary">导出</el-button>
        </div>
      </div>
    </div>
    <div class="rowItem">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="12" :lg="6">
          <div class="grid-content">
            <p class="p1">
              <span>人力成本</span> <i class="el-icon-warning-outline"></i>
            </p>
            <p class="p2">{{ dataList.humancost ? dataList.humancost : 0 }}</p>
            <div class="row">
              <span
                >年同比 &nbsp;<i class="el-icon-caret-top"></i>
                {{ dataList.humancostToMonth }}
              </span>
              <span
                >月环比 &nbsp;<i class="el-icon-caret-bottom"></i
                >{{ dataList.humancostToYear }}</span
              >
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="6">
          <div class="grid-content">
            <p class="p1">
              <span>应发薪资</span> <i class="el-icon-warning-outline"></i>
            </p>
            <p class="p2">
              {{ dataList.shouldSendSalary ? dataList.shouldSendSalary : 0 }}
            </p>
            <div class="row">
              <span
                >年同比 &nbsp;<i class="el-icon-caret-top"></i>
                {{ dataList.shouldSendSalaryToMonth }}
              </span>
              <span
                >月环比 &nbsp;<i class="el-icon-caret-bottom"></i
                >{{ dataList.shouldSendSalaryToYear }}</span
              >
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="6">
          <div class="grid-content">
            <p class="p1">
              <span>实发薪资</span> <i class="el-icon-warning-outline"></i>
            </p>

            <p class="p2">
              {{ dataList.takeHomePay ? dataList.takeHomePay : 0 }}
            </p>
            <div class="row">
              <span
                >年同比 &nbsp;<i class="el-icon-caret-top"></i>
                {{ dataList.takeHomePayToMonth }}
              </span>
              <span
                >月环比 &nbsp;<i class="el-icon-caret-bottom"></i
                >{{ dataList.takeHomePayToYear }}</span
              >
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="6">
          <div class="grid-content">
            <p class="p1">
              <span>计薪人数</span> <i class="el-icon-warning-outline"></i>
            </p>

            <p class="p2">
              {{ dataList.numberPeople ? dataList.numberPeople : 0 }}
            </p>
            <div class="row">
              <span
                >年同比 &nbsp;<i class="el-icon-caret-top"></i>
                {{ dataList.numberPeopleToMonth }}
              </span>
              <span
                >月环比 &nbsp;<i class="el-icon-caret-bottom"></i
                >{{ dataList.numberPeopleToYear }}</span
              >
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="canvasItem">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="24" :lg="12">
          <div class="grid-content">
            <p>
              人力成员占比
              <el-divider></el-divider>
            </p>

            <linecanvas-com :departDetialsList="dataList.departDetialsList" />
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="12">
          <div class="grid-content">
            <p>
              薪资对比
              <el-divider></el-divider>
            </p>
            <ucharts-com :departDetialsList="dataList.departDetialsList" />
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import linecanvasCom from "./components/lineCanvasCom.vue";
import uchartsCom from "./components/uchartsCom.vue";
import requestList from "@/api/moduleApi_xc/management";
import { mapState } from "vuex";
export default {
  name: "statementAnalysis", //报表分析
  components: {
    uchartsCom,
    linecanvasCom,
  },
  data() {
    return {
      params: {
        subId: "",
        createtime: new Date().toISOString().split("T")[0].substr(0, 7),
      },
      setCompanyList: [],
      dataList: {
        departDetialsList: [],
      },
    };
  },
  computed: {
    ...mapState({
      setUserList: (state) => state.reward.userList,
    }),
  },
  mounted() {
    this.intData();
  },
  methods: {
    //获取当前日期，格式YYYY-MM-DD
    async intData() {
      const { data } = await this.$api.commonXc
        .initSubCompanyList()
        .then((res) => res.data);
      this.setCompanyList = data;
      this.params.subId =
        this.setCompanyList.length > 0 ? this.setCompanyList[0].subid : "";
        this.getData()
    },
    getData(){
       requestList.Analysiscompensation(this.params).then((res) => {
        let { data, status } = res.data;
        if (status == 200) {
          this.dataList = data;
        }
      });
    },
    selectChange() {
      this.getData()
    },
    timeChange() {
      this.getData()
    },
  },
};
</script>
<style lang="less" scoped>
#statementAnalysis {
  padding: 0px 40px 0px 40px;
  .pageHead {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    min-width: 400px;
    justify-content: space-between;
    height: auto;
    margin-bottom: 20px;
    margin-top: 10px;

    .pageLf,
    .pageRg {
      display: flex;
      .block {
        margin-right: 1vw;
      }
    }
  }
  //
  .rowItem {
    .el-row {
      position: static;
      min-width: 400px;
    }
    .grid-content {
      padding: 20px 20px 20px 20px;
      border: 1px solid #efefef;
      margin-bottom: 4px;
      font-size: 12px;

      .p1 {
        display: flex;
        justify-content: space-between;
        span {
          font-size: 14px;
          color: #999999;
        }
        i {
          font-size: 16px;
          cursor: pointer;
        }
      }
      .p2 {
        font-weight: 500;
        font-size: 26px;
        margin-top: 10px;
        margin-bottom: 15px;
      }
      .row {
        display: flex;
        justify-content: space-between;
        .el-icon-caret-top {
          font-size: 18px;
          color: #99dd78;
        }
        .el-icon-caret-bottom {
          font-size: 18px;
          color: #f5222d;
        }
      }
    }
  }
  .canvasItem {
    margin-top: 20px;
    .grid-content {
      min-width: 400px;
    }
  }
}
</style>